<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聊天室</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/chat.js"></script>
    <link type="text/css" rel="stylesheet" href="./css/chat.css">
</head>
<style>
    .talk_con {
        width: 600px;
        height: 500px;
        border: 1px solid #666;
        margin: 50px auto 0;
        background: #f9f9f9;
    }

    .talk_show {
        width: 580px;
        height: 420px;
        border: 1px solid #666;
        background: #fff;
        margin: 10px auto 0;
        overflow: auto;
    }

    .talk_input {
        width: 580px;
        margin: 10px auto 0;
    }

    .whotalk {
        width: 80px;
        height: 30px;
        float: left;
        outline: none;
    }

    .talk_word {
        width: 420px;
        height: 26px;
        padding: 0px;
        float: left;
        margin-left: 10px;
        outline: none;
        text-indent: 10px;
    }

    .talk_sub {
        width: 56px;
        height: 30px;
        float: left;
        margin-left: 10px;
    }

    .atalk {
        margin: 10px;
    }

    .atalk span {
        display: inline-block;
        background: #0181cc;
        border-radius: 10px;
        color: #fff;
        padding: 5px 10px;
    }

    .btalk {
        margin: 10px;
        text-align: right;
    }

    .btalk span {
        display: inline-block;
        background: #ef8201;
        border-radius: 10px;
        color: #fff;
        padding: 5px 10px;
    }


    #chatBody {
        border-style: solid;
        border-color: dodgerblue;
        width: 100%;
        height: 500px;
        background-color: antiquewhite;
    }

    #chatMain {
        border-style: solid;
        border-color: crimson;
        width: 65%;
        float: left;
        height: 95%;
        margin-left: 5px;
        margin-top: 10px;
        display: none;
    }

    #chatCnt {
        background-color: aliceblue;
        border-style: solid;
        width: 95%;
        height: 65%;
        margin-left: 15px;
        margin-top: 5px;
    }


    #chatArea {
        background-color: azure;
        border-style: solid;
        width: 95%;
        height: 30%;
        margin-top: 5px;
        margin-left: 15px;
    }


    #lists {
        border-style: solid;
        border-color: aquamarine;
        float: right;
        width: 30%;
        height: 95%;
        margin-top: 10px;
        margin-right: 5px;
    }

    #tex_content {
        width: 99%;
        height: 75%;
    }


    #submit {
        float: right;
        width: 200px;
        background-color: #34d9d9;
    }
</style>
<body>
  <h1 align="center">聊天室</h1>
    <div id="chatMeu" style="background-color: darkgrey"></div>
    <!--聊天界面-->
    <div id="chatBody">
        <div id="chatMain" >
            <!--聊天展示区域-->
            <div id="chatCnt">

            </div>
            <div id="chatArea" >
                <textarea id="tex_content" placeholder="请输入文字！"></textarea>
                <input id="submit" type="button" value="发送"  >
            </div>
        </div>
        <!--右侧-->
        <div id="lists" >
            <!--好友列表-->
            <div>
                <ul style="background-color: darkgrey">好友列表(请点击好友聊天)</ul>
                <ul id="friendsList">
                    <!--<li><a onclick='chatWith("LiLi")'>LiLi</a></li>-->
                </ul>
            </div>
            <hr>
            <!--系统消息区-->
            <div>
                <ul style="background-color: darkgrey">系统通知</ul>
                <ul id="systemMsg">
                    <!--<li>Lili在线</li>-->
                </ul>
            </div>
        </div>
    </div>

</body>
</html>